/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

@import url('/fonts/smiley-sans/font.css');
@import url('./oswald.css');

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-code-font-size: 95%;
  --ifm-font-size-base: 125%;
  --ifm-heading-font-family: Oswald, 'Smiley Sans', sans-serif;
  --ifm-heading-font-weight: 400;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);

  --awly-font-family-emph: 'Noto Serif', serif, 'Times New Roman', 'Source Han Serif', '思源宋体', '宋体', 'SimSun', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

h1, h2, h3, h4, h5, h6 {
  /* shear the Oswald glyphs for visual compatibility with Smiley Sans */
  font-style: oblique 6deg;
}

.hero__title {
  font-size: 5rem;
}

.hero__subtitle {
  width: 66%;
  margin: 0 auto var(--ifm-paragraph-margin-bottom);
  font-size: 1rem;
}

@media (max-width: 500px) {
  .hero__title {
    font-size: 3rem;
  }

  .hero__subtitle {
    width: 100%;
  }
}

@media (min-width: 501px) and (max-width: 900px) {
  .hero__title {
    font-size: 4rem;
  }

  .hero__subtitle {
    width: 90%;
  }
}

@media (min-width: 901px) and (max-width: 1440px) {
  .hero__subtitle {
    width: 80%;
  }
}

.hero--primary a {
  color: var(--ifm-hero-text-color);
  text-decoration: underline;
}

.navbar {
  font-family: Oswald, 'Smiley Sans', sans-serif;
  font-style: oblique 6deg;
  font-size: 1.2rem;
}

.navbar__search {
  font-family: var(--ifm-font-family-base);
  font-style: normal;
  font-size: 1rem;
}

.navbar__link {
  font-weight: var(--ifm-font-weight-normal);
}

small {
  font-size: 75%;
}

.language-sh-session .shell-symbol,
.language-shell-session .shell-symbol {
  font-weight: 700;
}

[data-theme='light'] .language-sh-session .shell-symbol,
[data-theme='light'] .language-shell-session .shell-symbol {
  /* this is more-or-less arbitrary */
  color: var(--ifm-color-success);
}

[data-theme='dark'] .language-sh-session .shell-symbol,
[data-theme='dark'] .language-shell-session .shell-symbol {
  /* same as the "function" highlighting class in our dark code theme */
  color: rgb(80, 250, 123);
}

.link--overseas::after {
  content: '🌍';
  vertical-align: super;
  font-size: 75%;
  word-break: keep-all;
}

em.cjk {
  font-family: var(--awly-font-family-emph);
  font-style: normal;
  text-emphasis-style: dot;
  text-emphasis-position: under right;
}

/*
 * https://github.com/mermaid-js/mermaid/issues/1236
 *
 * This is only available for Firefox and Chromium 124+ (!), so manual
 * workarounds are still necessary for the moment.
 */
[aria-roledescription='flowchart-v2'] .marker {
  fill: context-stroke !important;
  stroke: context-stroke !important;
}
